/*
 * Tencent is pleased to support the open source community by making 蓝鲸 available.
 * Copyright (C) 2017 Tencent. All rights reserved.
 * Licensed under the MIT License (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 * http://opensource.org/licenses/MIT
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
 * either express or implied. See the License for the specific language governing permissions and
 * limitations under the License.
 */

@mixin ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@mixin space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@mixin scrollbar ($width: 8px, $bgColor: transparent) {
    overflow: auto;
    &::-webkit-scrollbar {
        width: $width;
        height: $width;
        background: $bgColor;
        &-thumb {
            min-height: 24px;
            border-radius: 20px;
            background-color: #dcdee5;

            &:hover {
                background: #979BA5;
            }
        }
        &:hover {
            background: #F0F1F5;
        }
    }
}

@mixin scrollbar-x ($width: 8px) {
    @include scrollbar;
    overflow-x: auto;
    overflow-y: hidden;
}

@mixin scrollbar-y ($width: 8px, $bgColor: transparent) {
    @include scrollbar($width, $bgColor);
    overflow-x: hidden;
    overflow-y: auto;
}

@mixin inlineBlock ($align: middle) {
    display: inline-block;
    vertical-align: $align;
}

@mixin middleBlockHack {
    &:before {
        @include inlineBlock;
        content: "";
        width: 0;
        height: 100%;
    }
}

/**
 * 表示区域支持拖拽的拖拽图标，例子可参考模型管理界面模型的拖拽
 * $width 图标的宽度
 * $height 图标的高度
 * $dotColor 图标的颜色
 * $dotSize 图标的点的大小
 */
@mixin dragIcon ($width: 8px, $height: 18px, $dotColor:#979ba5, $dotSize: 3px){
    width: 8px;
    height: 18px;
    cursor: move;

    &::before {
        content: "";
        display: block;
        margin: 0 auto;
        border-radius: 50%;
        $col1DotPosition: 4px;
        $col2DotPosition: 5px;
        transform: translate(calc(-#{$col2DotPosition}/2), $col1DotPosition);
        width: $dotSize;
        height: $dotSize;
        background-color: $dotColor;
        box-shadow: 0 $col1DotPosition 0 0 $dotColor,
        0 $col1DotPosition * 2 0 0 $dotColor, $col2DotPosition 0 0 0 $dotColor,
        $col2DotPosition $col1DotPosition 0 0 $dotColor,
        $col2DotPosition $col1DotPosition * 2 0 0 $dotColor;
    }
}